<template>
    <div class="index">
        <el-card class="!border-none" shadow="never">
            <el-form
                ref="formRef"
                class="mb-[-16px]"
                :model="queryParams"
                :inline="true"
            >
                <el-form-item label="赛事名称" prop="name">
                    <el-input class="w-[280px]" v-model="queryParams.name" placeholder="请输入赛事名称"/>
                </el-form-item>
                <el-form-item label="赛事地点" prop="address">
                    <el-input class="w-[280px]" v-model="queryParams.address" placeholder="请输入赛事地点"/>
                </el-form-item>
                <el-form-item label="赛事时间" prop="playTime">
                    <el-input
                        class="w-[280px]"
                        v-model="queryParams.playTime"
                        placeholder="请输入赛事时间"
                    />
                </el-form-item>
                <el-form-item label="比赛方式" prop="playType">
                    <el-select
                        v-model="queryParams.playType"
                        style="width: 191px"
                        placeholder="请选择比赛方式"
                        clearable
                    >
                        <el-option value="0" label="全类型" />
                        <el-option value="1" label="男单打" />
                        <el-option value="2" label="女单打" />
                        <el-option value="3" label="男双打" />
                        <el-option value="4" label="女双打" />
                        <el-option value="5" label="男女混打" />
                    </el-select>
                </el-form-item>
                <el-form-item label="赛事赛程" prop="schedule" placeholder="请选择赛事赛程">
                  <el-select v-model="queryParams.schedule" style="width: 191px" placeholder="请选择赛事赛程" clearable>
                    <el-option label="初赛" :value="1" />
                    <el-option label="半决赛" :value="2" />
                    <el-option label="总决赛" :value="3" />
                  </el-select>
                </el-form-item>
                <el-form-item label="组织方&nbsp;&nbsp;&nbsp;&nbsp;" prop="orgParty">
                    <el-input
                        class="w-[280px]"
                        v-model="queryParams.orgParty"
                        placeholder="请输入组织方"
                    />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="resetPage"
                        >查询</el-button
                    >
                    <el-button @click="resetParams">重置</el-button>
                </el-form-item>
            </el-form>
        </el-card>
      <el-card class="!border-none mt-4" shadow="never">
        <div class="ajax-load-con content excerpt-one" v-for="item in pager.lists" v-bind:key="item.id">
          <div class="content-box posts-image-box">
            <div class="posts-default-title">
              <div class="post-entry-categories">
                <NuxtLink :to="`/competition/match/${item.id}`">
                  赛程场次
                </NuxtLink>
<!--                <a href="/tags/101.html">国家级赛事</a>-->
              </div>
              <h2>
                <NuxtLink :to="`/competition/detail/${item.id}`">
                  <strong><strong>{{item.name}}</strong></strong>
                </NuxtLink>
              </h2>
            </div>

            <span class="thumbnail">
              <NuxtLink :to="`/competition/detail/${item.id}`">
                <span class="item">
                  <span class="thumb-span">
                    <img :src="item.cover" class="thumb">
                  </span>
                </span>
              </NuxtLink>
            </span>
            <div class="posts-default-content">
              <div class="posts-text">{{item.description}}</div>
              <div class="posts-default-info">
                <ul>
                  <li class="post-author">
                    <a><Icon name="el-icon-Avatar" /> <span>{{item.orgParty}}</span></a></li>
                  <li class="ico-time"><Icon name="el-icon-Clock" /> {{item.createTime}}</li>
                  <li class="ico-cat"><Icon name="el-icon-List" />
                    <el-tag type="success" v-if="item.playType.includes('0')||(item.playType.includes('1')&&item.playType.includes('2')&&item.playType.includes('3')&&item.playType.includes('4')&&item.playType.includes('5'))">全类型&nbsp;</el-tag>
                    <el-tag type="primary" v-if="item.playType.includes('1')">男单打&nbsp;</el-tag>&nbsp;
                    <el-tag type="warning" v-if="item.playType.includes('2')">女单打&nbsp;</el-tag>&nbsp;
                    <el-tag type="success" v-if="item.playType.includes('3')">男双打&nbsp;</el-tag>&nbsp;
                    <el-tag type="error" v-if="item.playType.includes('4')">女双打&nbsp;</el-tag>&nbsp;
                    <el-tag type="danger" v-if="item.playType.includes('5')">男女混打</el-tag>
                  </li>
                  <li class="ico-like"><Icon name="el-icon-View" /> {{item.viewNum}} </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
        <div class="flex justify-end mt-4">
          <pagination v-model="pager" @change="getLists" />
        </div>
      </el-card>
    </div>
</template>
<script lang="ts" setup>
import { useAppStore } from '~~/stores/app'
import { getCompetitionLists } from '@/api/competition'
import Pagination from '@/components/pagination/index.vue'

const queryParams = reactive({
    name: '',
    address: [] as any[],
    playTime: [] as any[],
    playType: '',
    schedule: '',
    orgParty: ''
})
const paramsInit: Record<any, any> = Object.assign({}, toRaw(queryParams))
const { data: pager,refresh } = await useAsyncData(() => getCompetitionLists({
            page_no: 1,
            page_size: 15,
            ...queryParams
        }),
{
    default: () => ({
      page: 1,
      size: 15,
      loading: false,
      count: 0,
      lists: [] as any[],
      extend: {} as Record<string, any>
    })
})


const resetPage = async () => {
    pager.page = 1
    getLists()
}

const getLists = async () => {
  refresh()
}
const resetParams = async () => {
    Object.keys(paramsInit).forEach((item) => {
        queryParams[item] = paramsInit[item]
    })
    resetPage()
}

const getSwiperData = computed(() => {
    try {
        const data = JSON.parse(pageData.value.page.data)
        console.log(data)
        return data.find((item) => item.name === 'pc-banner')?.content
    } catch (error) {
        return {}
    }
})
const showList = computed(() => {
    return getSwiperData.value?.data || []
})
</script>
<style lang="scss" scoped>
.content {
  position: relative;
  overflow: hidden;
  display: block;
  margin-bottom: 30px;
  background: #FFF;
  -webkit-box-shadow: 0 2px 5px 0 rgba(146, 146, 146, .1);
  -moz-box-shadow: 0 2px 5px 0 rgba(146, 146, 146, .1);
  box-shadow: 0 2px 5px 0 rgba(146, 146, 146, .1);
  -webkit-transition: all 0.6s ease;
  -moz-transition: all 0.6s ease;
  -o-transition: all 0.6s ease;
  transition: all 0.6s ease;
  border-radius: 20px;
}

.content-box {
  overflow: hidden;
  padding: 32px 27px;
}

.posts-default-title {
  position: relative;
  margin: 0 0 15px;
}
.post-entry-categories {
  margin-bottom: 20px;
}
.posts-default-title h2 {
  position: relative;
  font-size: 18px;
}
.post-entry-categories a:nth-child(5n+1) {
  background-color: #ff5e5c;
  font-weight: 600;
}
.post-entry-categories a:nth-child(5n+2) {
  background-color: #ffbb50;
  font-weight: 600;
}
.post-entry-categories a:nth-child(5n+3) {
  background-color: #1ac756;
  font-weight: 600;
}
.post-entry-categories a:nth-child(5n+4) {
  background-color: #19B5FE;
  font-weight: 600;
}
.post-entry-categories a {
  padding: 4px 10px;
  background-color: #19B5FE;
  color: #fff;
  font-size: 12px;
  line-height: 1.4;
  font-weight: 400;
  margin: 0 5px 5px 0;
  border-radius: 2px;
  display: inline-block;
}
.posts-default-title h2 a {
  font-weight: 900;
}

.thumbnail {
  display: block;
  padding: 4px;
  line-height: 1.42857143;
  background-color: #fff;
  border: 0;
  border-radius: 10px 30px 20px;
  -webkit-transition: border .2s ease-in-out;
  -o-transition: border .2s ease-in-out;
  transition: border .2s ease-in-out;
  float: left;
  margin-bottom: 6px;
  max-width: 250px;
  height: 120px;
}
.thumbnail .item {
  display: block;
  float: left;
  width: 100%;
  margin-bottom: 6px;
}
.thumb-span {
  position: relative;
  font-family: 'Glyphicons Halflings';
  overflow: hidden;
  border-radius: 10px 30px 20px;
}
.thumb-span {
  margin-right: 10px;
  display: block;
}
.thumbnail .thumb {
  max-width: 360px;
  width: 100%;
  height: 120px;
}

.posts-default-content {
  position: relative;
  line-height: normal;
}
.posts-default-content .posts-text {
  line-height: 2;
  margin-bottom: 16px;
  color: #566573;
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
.posts-default-info {
  position: relative;
  font-weight: 600;
}
.posts-default-info ul li.post-author {
  padding-left: 30px;
}

.posts-default-info ul li {
  font-size: 12px;
  letter-spacing: -.2px;
  padding: 0;
  margin: 0 20px 0 0;
  color: #748594;
  position: relative;
  line-height: 1.5;
  display: inline-block;
}

.posts-default-info ul li .avatar {
  position: absolute;
  top: -1px;
  left: 0;
  width: 25px;
}
.posts-default-info ul li a {
  color: #748594;
}

</style>
